<template>
  <div class="">
    <div class="title">
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <input
        type="text"
        placeholder="请输入内容"
        @keyup.enter="hc"
        @keyup.delete='ht'
        v-model="obj.val"
      />
      <span @click="obj.val = ''">取消</span>
    </div>
    <div class="ssls" v-if="!obj.val">
      <li class="ssls1"><span>搜索历史</span><span @click="del">删除</span></li>
      <span class="sww" @click="djlsjl(item)" v-for="(item, index) in obj.lsjl">{{ item }}</span>
    </div>
    <div class="spkp" v-if="obj.val" v-for="(item, index) in obj.list">
      <span class="ttt">{{ item.course_classify_title }}</span>
      <li class="mn">
        <span>{{ item.title }}</span>
      </li>
      <ul>
        <li class="bc" v-for="(item1, index1) in item.teacher">
          <img class="ii" :src="item1.avatar" alt="" />
          <span>{{ item1.teacher_name }}</span>
        </li>
      </ul>
      <p class="hh">限{{item.stock}}人</p>
      <li class="cc" >
        <span>{{item.sales_num}}人已报名</span>
        <li class='hh'><span class="ss1">￥{{item.vip_price/100}}</span><span class='ss2'>￥{{item.price/100}}</span></li>
      </li>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";
import { lsss } from "../api/homeApi";
const obj = reactive({
  val: "",
  lsjl: [],
  list: [],
});
const ht = () => {
  {
    console.log(1);
    obj.list = [];
  }
};
// 点击删除
const del = () => {
  obj.lsjl = [];
  localStorage.removeItem("lsjl");
};
// 点击历史记录
const djlsjl = async (val) => {
  obj.val = val;
  const res = await lsss(val);
  // console.log(res);
  obj.list = res.data.data;
};
// 回车事件
const hc = async () => {
  let num = obj.lsjl.findIndex((item) => {
    return item == obj.val;
  });
  if (num == -1) {
    obj.lsjl.push(obj.val);
    localStorage.setItem("lsjl", JSON.stringify(obj.lsjl));
  } else if (num >= 0) {
    obj.lsjl.splice(num, 1);
    obj.lsjl.unshift(obj.val);
    localStorage.setItem("lsjl", JSON.stringify(obj.lsjl));
  }
  const res = await lsss(obj.val);
  console.log(res);
  obj.list = res.data.data;
  // obj.val = "";
};
// 已进入页面获取历史记录
obj.lsjl = JSON.parse(localStorage.getItem("lsjl")) || [];
</script>
<style lang="scss" scoped>
.cc {
  display: flex;
  justify-content: space-between;
}
.ttt {
  display: inline-block;
  padding: 3px 10px;
  background: #f15a24;
  color: #fff;
}
.cc {
  margin-top: 10px;
}
.hh {
  margin-top: 10px;
}
.bc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
}
.ss1 {
  text-decoration: line-through;
  color: #ccc;
}
.ss2 {
  color: red;
}
.ii {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mn {
  padding: 0 30px;
  margin-top: 10px;
}
.sww {
  display: inline-block;
  padding: 15px;
  background: #f7f7f7;
  margin: 10px;
}
.spkp {
  padding: 15px;
}
.ssls1 {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  height: 70px;
  align-items: center;
}
input {
  background: #e4e7ed;
  border: none;
  border-radius: 15px;
  width: 60%;
  padding: 15px;
}
</style>
